<template>
	<div>
		<!-- 登陆的方式，支持2种，1种：账号密码登陆 2，手机号验证码 -->
		<div class="vf1">
			<!-- 账号密码登陆 -->
			<div v-if="logintype">
				<van-form>
				  <van-field
				    v-model="user.name"
				    label="用户名"
				    placeholder="请输入用户名或手机号"
				    :rules="[{ required: true, message: '请填写用户名或手机号' }]"
				  />
				  <van-field
				    v-model="user.pass"
				    :type="pwdtype"
				    label="密码"
				    placeholder="请输入密码"
					right-icon="eye-o"
					@click-right-icon="showPass()"
				  />
				  <div style="margin: 16px;">
				     <van-button round block type="primary" @click="loginName()">登陆</van-button>
				  </div>
				  <!-- 切换登陆模式 -->
				  <div>
				  	<label @click="changeDiv(1)">使用手机号验证码登陆</label>
				  </div>
				</van-form>
			</div>
			<!-- 手机号验证码登陆 -->
			<div v-else>
				<van-form>
				  <van-field
				    v-model="userphone.phone"
				    label="手机号"
				    placeholder="请输入手机号"
				    :rules="[{ required: true, message: '请填写手机号' }]"
				  />
				 <van-field
				   v-model="userphone.code"
				   center
				   clearable
				   label="验证码"
				   placeholder="请输入短信验证码"
				 >
				   <template #button>
				     <van-button size="small" type="primary" :disabled="btnflag" @click="sendCode()">{{btnmsg}}</van-button>
				   </template>
				 </van-field>
				  <div style="margin: 16px;">
				    <van-button round block type="primary" @click="loginPhone()">登陆</van-button>
				  </div>
				  <!-- 切换登陆模式 -->
				  <div>
				  	<label @click="changeDiv(2)">使用账号密码登陆</label>
				  </div>
				  <div>
					  <!-- 同意注册协议 -->
				  </div>
				</van-form>
			</div>
			
			<div style="font-size: 12px;color: gray;">
				<van-row>
				  <van-col span="8">还没账号，请<router-link to="/register">注册</router-link></van-col>
				  <van-col span="10"></van-col>
				  <van-col span="4"><router-link to="/findpass">找回密码</router-link></van-col>
				</van-row>
			</div>
		</div>
		
	</div>
</template>

<script>
export default{

	data(){
		return{
			
			logintype:true,
			pwdtype:"password",
			user:{
				
			},
			btnmsg:"发送验证码",
			btntime:60,
			btnflag:false,
			userphone:{
				
			},
		}
			
	},
	methods:{
		changeDiv(type){//切换登陆方式
			if(type==1){
				//切换为手机号验证码登陆
				this.logintype=false;
			}else{
				//切换成账号密码登陆
				this.logintype=true;
			}
		},
		showPass(){//切换密码的明文显示
			if(this.pwdtype==="password"){
				this.pwdtype="text";
			}else{
				this.pwdtype="password";
			}
		},
		sendCode(){//发送登陆验证码
			this.btnmsg="重新发送("+this.btntime+"s)";
			this.btnflag=true;
			//发送注册验证码
			this.axios.post("/api/sms/sendLoginCode.do?phone="+this.userphone.phone).then((res)=>{
				console.log(res.data);
				if(res.data.code==200){
					//发送成功
					this.$toast.success('验证码已发送，请查阅手机！');
					//重复执行，每秒一次
					var r=setInterval(()=>{
						if(this.btntime>0){
							this.btntime--;
							this.btnmsg="重新发送("+this.btntime+"s)";
						}else{
							//结束定时任务
							clearInterval(r);
							this.btnmsg="重新发送";
							this.btnflag=false;
							this.btntime=60;
						}
					},1000);
				}else{
					this.$toast.fail('发送失败，请检查手机号！');
				}
			})
		
		},
		loginName(){//账号密码登陆，账号可以是用户名，也可以是手机号
			this.axios.post("/api/user/login.do",this.user).then((res)=>{
				if(res.data.code==200){
					this.$toast.success('登陆成功，跳转中……');
					//登陆成功，存储令牌,设置数据到VueX
					this.$store.commit("setToken",res.data.data);
					//登陆成功,跳转主页
					this.$router.push("/home");
				}else{
					this.$toast.fail(res.data.msg);
				}
			});
		},
		loginPhone(){//手机号验证码登陆
			this.axios.post("/api/user/loginphone.do",this.userphone).then((res)=>{
				if(res.data.code==200){
					this.$toast.success('登陆成功，跳转中……');
					//登陆成功，存储令牌,设置数据到VueX
					this.$store.commit("setToken",res.data.data);
					//登陆成功,跳转主页
					this.$router.push("/");
				}else{
					this.$toast.fail(res.data.msg);
				}
			});
		}
	}
}
</script>

<style>
.vf1{
	margin-top: 40%;
}
</style>
